<template>
    <n-space :size="20" justify="start" class="h-full">
        <n-space class="min-w-300px w-full h-full pt-100px center" :vertical="true">
            <n-space justify="center">
								<n-avatar  class="w-250px h-250px" round :src="storeUserInfo.avatar"  />
            </n-space>
            <n-space justify="center">
								<n-upload :custom-request="handleChangeAvatar" :show-file-list="false" :max="1" ref="uploadRef">
									<n-button attr-type="button" type="primary" class="ml-auto mr-auto mt-8xl" >
											修改头像
									</n-button>
								</n-upload>
            </n-space>
        </n-space>
        <n-divider vertical />
        <n-space :vertical="true" :size="20" class="pt-100px">
            <n-form ref="formRef" :label-width="80" :model="userInfo" :rules="rules" label-placement="left">
                <n-form-item label="登录名" path="userName" class="w-400px">
                    <n-input v-model:value="userInfo.userName" :disabled="true" />
                </n-form-item>
                <n-form-item label="昵称" path="nickName">
                    <n-input v-model:value="userInfo.nickName" placeholder="请输入昵称" clearable />
                </n-form-item>
                <n-form-item label="邮箱" path="email">
                    <n-input v-model:value="userInfo.email" placeholder="请输入邮箱" clearable />
                </n-form-item>
                <n-form-item label="手机号" path="phone">
                    <n-input v-model:value="userInfo.phone" placeholder="请输入手机号" clearable />
                </n-form-item>
                <n-form-item label="性别" path="sex">
                    <n-radio-group v-model:value="userInfo.sex">
                        <n-radio class="mr-5px" value="0">男</n-radio>
                        <n-radio class="mr-5px" value="1">女</n-radio>
                    </n-radio-group>
                </n-form-item>
                <n-form-item label="部门" path="deptId">
									<n-tag>{{userInfo.deptName}}</n-tag>
                </n-form-item>
                <n-form-item>
                    <n-button attr-type="button" type="primary" class="ml-auto mr-auto" @click="handleChangeUserInfo">
                        修改
                    </n-button>
                </n-form-item>
            </n-form>
        </n-space>

    </n-space>
</template>

<script  setup lang='ts' >
import { ref, reactive, unref } from "vue"
import { FormInst, UploadCustomRequestOptions, UploadInst } from 'naive-ui'
import { fetchUpdateUserInfo } from '@/service/api/auth'
import { useFormRules } from '@/hooks/common/form';
import { useAuthStore } from '@/store/modules/auth';

const auth = useAuthStore()
const { formRules } = useFormRules();
const storeUserInfo = auth.userInfo
const userInfo = reactive<SysAuth.UserInfo>(unref(storeUserInfo))
const uploadRef =  ref<UploadInst|null>()
const rules = {
    nickName: { required: true, message: "请输入昵称", trigger: 'blur' },
    email: formRules.email,
    phone: formRules.phone
}
const formRef = ref<FormInst | null>(null)


function handleChangeUserInfo() {

	formRef.value?.validate(async err => {
			if (!err) {
				const { error } = await fetchUpdateUserInfo(userInfo)
				if(!error){
					window.$message?.success("操作成功")
					auth.refreshUserInfo()
				}
			}
	}).catch()
}

async function handleChangeAvatar({ file, data, headers, withCredentials, action, onFinish,onError, onProgress }: UploadCustomRequestOptions){
	const formData = new FormData()
	formData.append("file", file.file as File)
	const result = await auth.setAvatar(formData)
	if(result){
		window.$message?.success("操作成功")
	}
	uploadRef.value?.clear()
}



</script>

<style lang="scss" scoped>
.n-divider.n-divider--vertical {
    height: 100%;
}
</style>
